<script setup lang="ts">
withDefaults(defineProps<{ name: string; videoUrl: string }>(), {
  name: () => '视频标题',
  videoUrl: () => '',
})

// console.log('name=', name)
// console.log('videoUrl=', videoUrl)


let flag = ref<boolean>(false)

// 显示
const showVideo = () => {
  flag.value = true
}

// 关闭
const videoRef = ref()
const closeVideo = () => {
  videoRef.value.pause()
  videoRef.value.currentTime = 0 // 将视频时间重置为0，即开头
  flag.value = false
}
</script>

<template>
  <a @click="showVideo" class="video" style="font-size: 18px;"><PlayCircleOutlined /></a>

  <div
    v-if="flag"
    style="
      width: 300px;
      height: 207px;
      position: relative;
      z-index: 1;
      background: #1890ff;
      padding: 5px;
    "
  >
    <div style="padding: 0 5px; color: #fff">
      <span>{{ name }}</span>
      <span
        style="float: right; height: 22px; line-height: 25px; cursor: pointer"
        @click="closeVideo"
      >
        <CloseSquareOutlined style="font-size: 18px" />
      </span>
    </div>
    <video ref="videoRef" controls autoplay style="width: 100%; height: 174px">
      <source :src="videoUrl" type="video/mp4" />
      你的浏览器不支持播放视频
    </video>
  </div>
</template>
